<template>
	<div class="zh-album-management">
		<nav-header></nav-header>
		<div class="zh-table">
			<div class="zh-table-open clear">
				<div class="zh-open-left fl">
					<div style="display: inline-block;">
						<div class="open-width" v-if="!$store.state.checkLevel" style="width: 100px">
							<el-select v-model="listParam.study_section_id"  filterable placeholder="请选择">
								<el-option
								v-for="item in orgLevel2"
								:key="item.id"
								:label="item.name"
								:value="item.id">
								</el-option>
							</el-select>
						</div>
						<div class="open-width" v-if="!$store.state.checkLevel" style="width: 100px">
							<el-select v-model="listParam.subject_id" filterable  placeholder="请选择">
								<el-option
								v-for="item in orgSubject"
								:key="item.id"
								:label="item.name"
								:value="item.id">
								</el-option>
							</el-select>
						</div>
					</div>
					<div class="open-width">
						<el-input v-model="listParam.keyword" v-if="$store.state.checkLevel" placeholder="名称" @keyup.enter.native="searchFunc"></el-input>
						<el-input v-model="listParam.keyword" v-else placeholder="请输入专辑名、教师名搜索" @keyup.enter.native="searchFunc"></el-input>
					</div>
					<el-button type="primary" @click="searchFunc">搜索</el-button>
					<el-button type="primary" @click="reset">重置</el-button>
				</div>
				<div class="zh-open-right fr" v-if="!$store.state.checkLevel">
			    <!-- <el-button type="text" @click="toLink('/resources/resource/resource-push-history?per=专辑管理&type=3')">推送历史</el-button> -->
					<!-- <el-button type="primary" v-if="$store.state.platformInformation" @click="pushLowAll">批量推下级</el-button> -->
					<!-- <el-button type="primary" v-if="platform" @click="pushUpAll">批量推上级</el-button> -->
				</div>
				<div class="zh-open-right fr" v-if="$store.state.checkLevel"> <!-- $store.state.platformInformation&& -->
					<el-button type="primary" @click.stop="addRoute">添加专辑</el-button>
				</div>
			</div>
			<div class="zh-table-contents"
				v-loading="loading.status"
				:element-loading-text="loading.txt">
				<!-- 多级版start -->
				<el-table
					v-if="$store.state.checkLevel"
				    :data="listData"
				    border
				    max-height="541"
					 @selection-change="handleSelectionChange"
				    style="width: 100%">
				    <el-table-column
				      type="selection"
				      width="50"
				      fixed>
				    </el-table-column>
				    <el-table-column
				      prop="name"
				      label="专辑名称"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="createname"
				      label="主讲人"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="create_time"
				      label="创建时间"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="usercount"
				      label="参与人数"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="5"
				      label="操作"
				      align="center"
				      width="234"
				      show-overflow-tooltip>
				      	<template slot-scope="scope">
			      	        <el-button @click="statisticsRoute(scope.row.albumid)" type="text">统计</el-button>
			      	        <el-button @click="editRoute(scope.row.albumid)" type="text">编辑</el-button>
			      	        <el-button @click="delete_confirm(scope.row)" type="text" class="delete-button">删除</el-button>
			      	    </template>
				    </el-table-column>
				</el-table>
				<!-- 多级版 end----------------------- -->
				<el-table
					v-else
				    :data="listData"
				    border
				    max-height="541"
					 @selection-change="handleSelectionChange"
				    style="width: 100%">
				    <el-table-column
				      type="selection"
				      width="50"
				      fixed>
				    </el-table-column>
				    <el-table-column
				      prop="name"
				      label="专辑名称"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="categoryname"
				      label="专辑分类"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="createname"
				      label="创建人"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="create_time"
				      label="创建时间"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <!-- <el-table-column
				      prop=""
				      label="是否首页"
				      align="center"
				      show-overflow-tooltip
				      >
				      <template slot-scope="scope">
				      	  <div v-html="getTop(scope.row.top)"></div>
				      	</template>
				    </el-table-column> -->
				    <el-table-column
				      prop="usercount"
				      label="参与人数"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <!-- <el-table-column
				      prop="sort"
				      label="位置"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column> -->
				    <el-table-column
				      prop="5"
				      label="操作"
				      align="center"
				      width="234"
				      show-overflow-tooltip>
				      	<template slot-scope="scope">
			      	        <!-- <el-button @click="statisticsRoute(scope.row.albumid)" type="text">上课统计</el-button> -->
			      	        <el-button @click="editRoute(scope.row.albumid)" type="text">查看</el-button>
			      	        <!-- <el-button @click="pushIndexBox(scope.row)" type="text">推首页</el-button> -->
							<template v-if="$store.state.checkLevel">
								<el-button v-if="platform" @click="pushUpTrigger(scope.row)" type="text">推上级</el-button>
								<el-button v-if="$store.state.platformInformation" @click="pushLow(scope.row)" type="text">推下级</el-button>
							</template>
			      	        <el-button @click="delete_confirm(scope.row)" type="text" class="delete-button">删除</el-button>
			      	    </template>
				    </el-table-column>
				</el-table>
				<div class="table-pagination" v-show="total_number > 10">
					<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="listParam.page_index"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="listParam.page_size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button
							@click="getList"
							type="primary" icon="el-icon-refresh"
							circle title="刷新数据" size="mini" >
						</el-button>
					</div>
				</div>
			</div>
		</div>
		<!-- 推首页 -->
		<el-dialog
			title="首页展示"
			:visible.sync="homeVisible"
			width="800px"
			custom-class="home-page"
			:close-on-press-escape="false"
			:close-on-click-modal="false">
			<div class="home-page-c">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<!-- <div class="home-page-t">
						请选择首页位置：<span>专辑 《{{pushObj.name}}》将放置在 “位置{{ruleForm.selectIndex+1}}”</span>
					</div> -->
					<el-form-item label-width="0" prop="selectIndex">
						<el-radio-group v-model="ruleForm.selectIndex">
							<el-radio v-for="(item,inx) in positionData" @change="renderPushHtml()" :key="inx" :label="inx" class="page-checked">
								<div class="home-page-ls">
									<div>
										<img :src="BASE_URL+item.picture" >
									</div>
									<p>位置{{inx+1}}</p>
								</div>
							</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label-width="0">
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					   <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>

					 </el-form-item>
				</el-form>
			</div>
			<!-- <div slot="footer" class="dialog-footer"></div> -->
		</el-dialog>
		<!-- 推下级begin -->
		<el-dialog
			title="推下级"
			:visible.sync="pushLowFlag"
			v-if="pushLowFlag"
			width="600px"
			:close-on-click-modal="false">
			<push-low-win @listenPushLow="getPushLowList"></push-low-win>
			<span slot="footer" class="dialog-footer">
				<el-button @click="pushActive()">取 消</el-button>
				<el-button type="primary"  @click="pushActive(1)">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 推下级end -->
	</div>
</template>
<script>
import pushLowWin from '@/components/common/push-low-win'
  	export default {
	    data() {
		    return {
					app_code: sessionStorage.getItem('CheckSchoolAppCode'),
		    	loading:{
						status:false,
						txt:'获取数据...',
					},
		    	listData:[],
		    	listParam:{
					platform_id: null,
		    		study_section_id:0,
		    		subject_id:0,
						keyword: '',
						page_index:1,
						page_size:10,
						order_type: 'time'
					},
		    	orgLevelParam:{ //获取学段,年纪参数
						level:2,
						pid:1,
						direction:'balance',
					},
		    	orgLevel2:[{id:0,name:'全部学段'}],
		    	orgSubject:[{id:0,name:'全部科目'}],
		    	subjectParam:{ //获取科目,版本，参数
						type:2,
						org_id:null,
						status:1,
					},
		    	total_number:0,
		    	topArr:{0:'否',1:'是'},
		    	positionData:[],
		    	tempPositionData:[],
		    	homeVisible: false,
		    	ruleForm: {
		    	 	selectIndex: null,
					},
					rules: {
						selectIndex: [
								{ required: true, type: 'number', message: '请选择一个位置', trigger: 'change'}
						],
					},
					pushObj:{},
					platform: '',/*可推送上级 */
					pid: '',/*可推送上级id */
					pushLowFlag: false,/*推下级弹窗 */
					pushLowObj: null,/*推下级对象 */
					pushLowNames: ['1','2'],/*获取下级列表参数 */
					schoolList: [],/*学校列表 */
					selSchoolList: [],/*选择的下级列表 */
					ids: [],/*存放被选中的视频列表 */
					pushLowStatus: null,/*记录是否批量推下级*/
					pushUpStatus: null,/*记录是否批量推上级 */
		    }
		},
		watch:{
			'listParam.study_section_id':{
	    		handler(newVal,oldVal){
	    			this.listParam.subject_id = null;

					this.subjectParam.org_id = newVal;
					this.getSubject();
　　　　　　　　}
			},

		},
		created(){
			this.getOrgLevel2();
			this.getSubject();
			this.getList();
			if (this.$store.state.checkLevel) {
				this.platform_parent();
			}
		},
		methods: {
			albumAdd() { //添加专辑
				console.log(111)
			},
			searchFunc(){
				this.listParam.page_index = 1;
				this.getList();
			},
			reset() {
				this.orgLevelParam = { //获取学段,年纪参数
					level:2,
					pid:1,
					direction:'balance',
				}
				this.subjectParam = { //获取科目,版本，参数
					type:2,
					org_id:null,
					status:1,
				}
				this.listParam ={
					platform_id: null,
					study_section_id:null,
		    		subject_id:null,
		       		keyword: '',
		       		page_index:1,
		       		page_size:10,
                    order_type: 'time'
				}
				this.getList();
			},
			savePosition(){
				let success = ( data=>{
            		this.$message.success(data.msg);
            		this.homeVisible = false;
            	})
				this.$ajax.post('api/album/album_commend_home',{id:this.pushObj.albumid,position:this.ruleForm.selectIndex+1},{func:{success:success}})

			},
			getPosition(){
		   		this.loading.status = true;
            	let success = (data=>{
            		this.loading.status = false;
            		this.tempPositionData = data.data;
            		this.ruleForm.selectIndex = null;
            		this.renderPushHtml();
            	})
            	let fail = ( data => {
            		this.loading.status = false;
            		this.$message.error(data.msg)
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/album/album_home_position',{params: {},func:{success:success,fail:fail}})
            },
            renderPushHtml(){
            	 //console.info(is_empty(this.ruleForm.selectIndex))
            	this.positionData = [];
            	for (var i = 0; i <= 7; i++) {
        			var temp_  = { position: i+1 , name:'' , picture: '/static/default/video_cover.png'}
        			for ( var j = 0 ; j < this.tempPositionData.length; j++ ) {
        				if( (i+1) === parseInt( this.tempPositionData[j].position )  ){
        					if( is_empty(this.ruleForm.selectIndex) || ( !is_empty(this.ruleForm.selectIndex) && parseInt(this.pushObj.albumid) !== parseInt( this.tempPositionData[j].resid )  )){
        						temp_ = deep_clone(this.tempPositionData[j]);
        					}

        				}
        			}
        			if( this.ruleForm.selectIndex === i ){
						this.positionData.push(  this.pushObj );
        			}else{
        				this.positionData.push( temp_ );
        			}

        		}

            },

			pushIndexBox(obj){
				this.homeVisible = true;
				this.ruleForm.selectIndex = null;
				this.pushObj = {albumid:obj.albumid,name:obj.name,picture:obj.picture,position:null}

				this.getPosition();
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.savePosition();
					} else {
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			editRoute(id){
				this.$router.push('/resources/resource/album-editor/'+id)
			},
			statisticsRoute(id){
				this.$router.push('/resources/resource/album-count/'+id)
			},
			addRoute(){
				this.$router.push('/resources/resource/album-add/')
			},
			// 序号
            typeIndex(index) {
                return index + (this.listParam.page_index - 1) * this.listParam.page_size + 1;
            },
			getTop(val){
				return this.topArr[parseInt(val)]
			},
		   	getList(){
		   		this.loading.status = true;
            	let success = (data=>{
					console.log(JSON.parse(JSON.stringify(data.data.data)))
            		this.loading.status = false;
            		this.listData = data.data.data;
            		this.total_number = data.data.data_sum;
            	})
            	let fail = ( data => {
            		this.loading.status = false;
            		this.$message.error(data.msg)
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/album/albums_list',{params: this.listParam,func:{success:success,fail:fail}})
            },
			//获取学段
			getOrgLevel2(){
				let success = ( data=>{
					this.orgLevel2 = data.data;
					this.orgLevel2.unshift({id:0,name:'全部学段'})
				})
				if(this.$store.state.checkLevel){
					this.orgLevelParam.app_code = this.app_code
					this.$ajax.get('api/network/get_platform_org',{params: this.orgLevelParam,func:{success:success}})
				}else{
					this.$ajax.get('api/org/org',{params: this.orgLevelParam,func:{success:success}})
				}
			},
			//获取科目
			getSubject(){
				let success = ( data=>{
					this.orgSubject = data.data;
					this.orgSubject.unshift({id:0,name:'全部科目'});
				})
				if(this.$store.state.checkLevel){
					this.subjectParam.app_code = this.app_code
					this.$ajax.get('api/newlevel/platform_subject',{params: this.subjectParam,func:{success:success}})
				}else{
					this.$ajax.get('api/cate/subject',{params: this.subjectParam,func:{success:success}})
				}
			},
			delete_confirm(obj){
				let yes = ( data => {
					this.delete(obj.albumid,0);
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.name+' 删除吗？'});

			},
			delete(id,status){
		    	let success = ( data => {
					this.$message.success(data.msg);

					if (this.listData.length - 1 === 0) {
						if (this.listParam.page_index > 1) {
							this.listParam.page_index-- ;
						} else {
							this.listParam.page_index = 1;
						}
					}

					this.getList();
				});
		    	this.$ajax.delete('api/album/album',{params:{albumid:id,status:status},func:{success:success}})
		    },
			handleSizeChange(val) {
				this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
			},
			platform_parent() {/*获取可推送上级 */
				const success= res =>{
					if (!is_empty(res.data)) {
						this.platform = res.data.name;
						this.pid = res.data.id;
					}
				}
				this.$ajax.get('api/level/platform_parent', { params: {},func: {success: success}})
			},
			pushLow(data) {/*推下级 */
				this.pushLowObj = data;
				this.pushLowStatus = null;
				this.pushLowFlag = true;
			},
			pushActive(flag) {/*推下级执行 */
				if(flag) {
					if(this.selSchoolList.length <= 0) {
						this.$message.error('请选择要推送的下级');
						return;
					}
					let params = {
						id: [],
						res_type: 'album',
						school_id: '',
						push_type: 2,
					}
					if(this.pushLowStatus) {
						params.id = this.ids;
					} else {
						params.id.push(this.pushLowObj.albumid);
					}
					let arr = [];
					this.selSchoolList.forEach(item=> {
						arr.push(item.id);
					})
					params.school_id = arr.join();
					const success=res=>{
						this.pushLowHide();
						this.ids = [];
						this.getList();
					}
					this.$ajax.post("api/level/push_data", params, {
						func: { success: success }
					});
				} else {
					this.pushLowHide();
				}
			},
			pushLowAll() {/*批量推下级 */
				if(this.ids.length <= 0) {
					this.$message.error('请选择要推送的选项');
					return
				}
				this.pushLowStatus = 1;
				this.pushLowFlag = true;
			},
			getPushLowList(list) {/*获取组件传递列表 */
				this.selSchoolList = list;
			},
			pushLowHide() {/*推下级窗口隐藏 */
				this.pushLowObj = null;
				this.pushLowFlag = false;
			},
			pushUp(id) {
				let params = {
					id: id,
					res_type: 'album',
					school_id: this.pid,
					push_type: 1,
				}
				const success=res=>{
					this.$message.success(res.msg)
					this.ids = [];
					this.getList();
				}
				this.$ajax.post("api/level/push_data", params, {
					func: { success: success }
				});
			},
			pushUpTrigger(data) {
				let title = `是否要将资源推送至${this.platform}？（需经过审核）`;
				 this.$confirm(title, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {
						if(data) {
							let ids = [data.albumid];
							this.pushUp(ids);
						} else {
							this.pushUp(this.ids);
						}
					}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消推送'
					});
				});
			},
			pushUpAll() {/*批量推上级 */
				if(this.ids.length <= 0) {
					this.$message.error('请选择要推送的选项');
					return
				}
				this.pushUpTrigger();
			},
			toLink(link) {
				this.$router.push(link);
			},
			handleSelectionChange(val) {
				this.ids = [];
				if(val.length > 0) {
					val.forEach(item=>{
						this.ids.push(item.albumid);
					})
				}
			},
		},
		components: {
			pushLowWin
		}
  	}
</script>
<style lang="scss">
	.zh-album-management {
		.el-table__body-wrapper table tbody {
			td:nth-child(9) {
				padding: 0;
			}
		}
		.home-page{
			.el-dialog__body{
				padding: 30px 0 0;
			}
		}
		.home-page-t{
			margin-bottom: 20px;
			font-size: 12px;
			>span{
				color: #348EFC;
			}
		}
		.home-page-c{
			padding: 0 0 0 30px;
			.el-radio__label{
				padding: 0;
			}
		}
		.el-radio+.el-radio{
			margin: 0;
		}
		.el-form-item{
			max-height: 500px;
			overflow: hidden;
			overflow-y: auto;
			padding-bottom: 20px;
		}
		.page-checked{
			width: 170px;
			height: 131px;
			overflow: hidden;
			margin: 0 20px 20px 0 !important ;
			padding: 0;
			&:nth-of-type(4n){
				margin: 0 0 20px 0 !important ;
			}
			.el-radio__input{
				position: absolute;
				bottom: 10px;
				left: 0;
			}
			.el-radio__label{

			}
			.home-page-ls{
				>div{
					width: 100%;
					height: 100px;
					overflow: hidden;
					margin-bottom: 5px;
					>img{
						width: 100%;
						height: 100%;
					}
				}
				>p{
					margin: 0;
					padding-left: 20px;
				}
			}
		}
	}
</style>
